<template>
    <div class="home-content">
            <div class="top-list">
                 <div class="list-item" v-for="(item, i) in topList" :key="i">
                     <img src="" alt="">
                     <div class="details">
                         <div class="title">{{item.title}}</div>
                         <span class="num">{{item.num}}</span>
                     </div>
                 </div>
            </div>
            <project-charts></project-charts>
            <msg-box></msg-box>
    </div>
</template>
<script>
import projectCharts from './ProjectCharts'
import msgBox from './MsgBox'
export default {
    name: 'homeContent',
    components: {
        projectCharts,
        msgBox
    },
    data () {
        return {
            topList: [
                {
                    title: '我负责的项目(个)',
                    num: 5
                },
                {
                    title: '我负责的项目(个)',
                    num: 5
                },
                {
                    title: '我负责的项目(个)',
                    num: 5
                }
            ]
        }
    }
}
</script>
<style lang="less" scoped>
.home-content {
    width: 100%;
    min-height: 1000px;
    .top-list {
        margin-bottom: 10px;
        overflow: hidden;
        .list-item {
            background: #fff;
            float: left;
            width: calc(33.33% - 6.6667px);
            margin-right: 10px;
            height: 138px;
            display: flex;
            align-items: center;
            flex-direction: row;
            padding-left: 3%;
            &:last-child {
                margin-right: 0;
            }
            img {
                display: inline-block;
                width: 70px;
                height: 70px;
                border-radius: 50%;
                margin-right: 28px;
            }
            .details {
                .num {
                    display:inline-block;
                    font-size: 34px;
                    color: #333;
                }
                .title {
                    color: #999;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>